@extends('layouts.back_stage')
@section('style')
    @parent
    <link rel="stylesheet" href="{{env('CDN_DOMAIN_NAME')}}/css/dateSelect.css"/>
    <link href="{{env('CDN_DOMAIN_NAME')}}/store/commoncss/simplePagination.css" rel="stylesheet">
    <script src="{{ env('CDN_DOMAIN_NAME') }}/store/commonjs/jquery.simplePagination.js?v0.0.3"></script>
    <style>
        .popup{width:500px;height:auto;background:#fff;position:absolute;top:25%;left:30%;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;z-index:20000;-moz-user-select: none; -webkit-user-select: none;}
        .popup_header{width:100%;height:50px;padding:15px;border-bottom:1px solid #e5e5e5;cursor: move;position: relative;}
        .shut{float:right;font-size:21px;font-weight:700;line-height:1;color:#ccc;text-shadow:0 1px 0 #fff;opacity:2;cursor:pointer;outline:none;background:#fff;border:0;}
        .shut:hover{color:red;}
        .popup_center{padding:20px 40px;}
        .popup_center p{font-size:15px;margin-bottom: 30px;}
        .popup_center p span{margin-right:20px;}


        .order_img {width: 50px;height: 100%;float: left;margin-right: 10px;}
        .order_img img {width: 100%;padding: 13px 0;}
        .order_ul {margin-bottom: 0;float: left;}
        .order_li {text-align: start;}
        .order_p {margin-bottom: 0;text-align: start;}
        .form-control {font-size: 12px;}
        .ulInfo{margin-bottom:0;margin-right:20px;float:left;}
    </style>
@endsection
@section('script')
    @parent
    <script src="{{env('CDN_DOMAIN_NAME')}}/js/dateSelect.js"></script>
@endsection
@section('content')
    <div class="container">
        <div style="padding:20px 20px 20px 0;overflow:hidden;"><h3 style="float:left;">预售订单列表</h3></div>
        <div>
            <form style="display: inline-block;">
                    <label>选择公司：</label>
                    <select id="sort" class="address company_id qing" style="width: 150px">
                        <option value="">全部公司</option>
                        @foreach($company_name as $k=>$v)
                            <option value="{{ $k }}">{{ $v }}</option>
                        @endforeach
                    </select>

                <label>订单状态：</label>
                <select id="sort" class="address status qing" style="width: 150px">
                    <option value="">全部</option>
                    @foreach($status as $k=>$v)
                        <option value="{{ $k }}">{{ $v }}</option>
                    @endforeach
                </select>
                <label>用户名：</label><input type="text" placeholder="请输入用户名" class="form-control user_name qing" style="width: 150px;display: inline-block;" value="">
                <label>手机号：</label><input type="text" placeholder="请输入手机号" class="form-control user_tel qing" style="width: 150px;display: inline-block;" value="">
                <label>款号：</label><input type="text" placeholder="请输入款号" class="form-control girard qing" style="width:150px;display: inline-block;" value="">
                <label>时间：</label><input id="date1" class="form-control start_at qing" style="width:120px;display: inline-block;background:#fff;" type="text" value="" readonly placeholder="开始时间"/>
                <input id="date2" class="form-control end_at qing" style="width:120px;display: inline-block;background:#fff;" type="text" value="" readonly placeholder="结束时间"/>
                <button type="button" class="btn btn-info" style="margin-bottom:3px;" onclick="souSuo()">搜索</button>
                <button type="button" class="btn btn-info" style="margin-bottom:4px;" onclick="reSetScan()">清空</button>
            </form>
            <a class="btn btn-primary" style="float: right;" href="javascript:;" onclick="Export()">导出</a>
        </div>
            <div class="form-group foDiv" style="padding:15px 0;border-bottom:1px solid #e7eaec;margin-bottom:0;float:left;width:100%;">

            </div>
        <table class="table table-hover tbIndo" style="margin-top:20px;">
            <thead>
            <tr>
                <th class="col-sm-2">订单信息</th>
                <th class="col-sm-1">详情</th>
                <th>商户订单号</th>
                <th style="width:190px;">用户信息</th>
                <th>订单生成时间</th>
                <th>支付成功时间</th>
                <th>预发货时间</th>
                <th>发货时间</th>
                <th>订单状态</th>
                <th>支付方式</th>
                <th>地区</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
        <div style="float: right">
            <div style="float: right;margin:20px 0;">
                <div id="paging1" class="page" style=""></div>
            </div>
        </div>
        {{--品牌设置弹框--}}
        <div class="popup" style="display:none;">
            <div class="popup_header">
                <span>详情</span>
                <button class="shut1 shut">×</button>
            </div>
            <div class="popup_center">

            </div>
        </div>

    </div>
    <script>
        var skip=0;
        var company=[
                @foreach($company_name as $k=>$v)
                {'form_company_id':'{{ $k }}','name':'{{ $v }}'},
                @endforeach
            ];
        /*搜索*/
        function souSuo(){
            skip=0;
            loads();
        }
        /*清空按钮*/
        function reSetScan(){
            skip = 0;
            $(".qing").each(function(){
                $(this).val("");
            });
            loads();
        }
        /*上一页、下一页*/
        $(document).on('click','.page-link',function(){
            if($(this).attr('class') === "page-link next nextPage"){
                if($(this).parent().attr('class') == 'active'){
                    return false;
                }else{
                    skip=Number(skip)+1;
                    loads();
                }
            }else if($(this).attr('class') === "page-link prev prevPage"){
                if($(this).parent().attr('class') == 'active'){
                    return false;
                }else{
                    skip=Number(skip)-1;
                    loads();
                }
            }else if($(this).attr('class') === "page-link tcdNumber"){
                skip=Number($(this).text())-1;
                loads();
            }
        });
        /*刚进页面初始化*/
        loads();
        function loads() {
            var company_id = $(".company_id").val();
            var status = $(".status").val();
            var user_name = $('.user_name').val();
            var user_tel = $(".user_tel").val();
            var girard = $(".girard").val();
            var start_at = $(".start_at").val();
            var end_at = $('.end_at').val();
            $.ajax({
                headers: {'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
                url: '/order/sale-order-list',
                data: {
                    company_id:company_id,
                    status:status,
                    user_name:user_name,
                    user_tel:user_tel,
                    girard:girard,
                    start_at:start_at,
                    end_at:end_at,
                    skip:skip
                },
                type: 'post',
                dataType: 'json',
                success: function (data) {
                    console.log(data);
                    if (data.result.success) {
                        $(".tbIndo tbody").empty();
                        $(".foDiv").empty();
                        var uls=data.content.girard_info;
                        if(uls.length>0){
                            var sf='';
                            for(var d in uls){
                                sf=sf+'<ul class="ulInfo">' +
                                    '<li>款号：'+uls[d].girard+'</li>' +
                                    '<li>颜色：'+uls[d].color+'</li>' +
                                    '<li>尺码：'+uls[d].size+'</li>' +
                                    '<li>数量：'+uls[d].nums+'</li>' +
                                    '</ul>';
                            }
                            $(".foDiv").append(sf);
                        }else{
                            $(".foDiv").empty();
                        }
                        var res=data.content.list;
                        if(res.length>0){
                            var string='';
                            for(var l in res) {
                                var detArr=res[l].order_details;
                                var nst='';
                                for(var b in detArr){
                                    nst=nst+'<p class="order_p">'+detArr[b].color+' '+detArr[b].size+'码 '+detArr[b].num+'件</p>';
                                }
                                if( nulls(res[l].successed_at)=='' ){
                                    var fang='';
                                }else{
                                    var fang=payType(res[l].pay_type);
                                }
                                string=string+'<tr class="tr_'+res[l].id+'"><td>' +
                                    '<div class="order_img"><img src="{{ env('CDN_DOMAIN_NAME') }}/upload/' + res[l].face + '"></div>' +
                                    '<ul class="order_ul">' +
                                    '<li class="order_li">品牌：' + nulls(res[l].brand_id) + '</li>' +
                                    '<li class="order_li">款号：' + nulls(res[l].girard) + '</li>' +
                                    '<li class="order_li">数量：' + nulls(res[l].num) + '件</li>' +
                                    '<li class="order_li">金额：￥' + nulls(res[l].total_price) + '</li>' +
                                    '</ul>' +
                                    '</td>' +
                                    '<td>'+nst+'</td>' +
                                    '<td><div style="width:100px;word-break:break-all">' + nulls(res[l].ordernum) + '</div></td>' +
                                    '<td>' +
                                    '<p class="order_p">公司：' + comp(res[l].company_id) + '</p>' +
                                    '<p class="order_p">电话：' + nulls(res[l].tel) + '</p>' +
                                    '<p class="order_p">姓名：' + nulls(res[l].addressee_name) + '</p>' +
                                    '</td>' +
                                    '<td>' + nulls(res[l].created_at) + '</td>' +
                                    '<td class="success_time">' + nulls(res[l].successed_at) + '</td>' +
                                    '<td>' + nulls(res[l].estimate_send_at) + '</td>' +
                                    '<td>' + nulls(res[l].send_at) + '</td>' +
                                    '<td class="td_status">' + sta(res[l].status) + '</td>' +
                                    '<td class="td_type">' + fang + '</td>' +
                                    '<td>'+nulls(res[l].area_name)+'</td>' +
                                    '<td class="td_'+res[l].id+'" abc='+res[l].id+'>'+make(res[l].status)+'</td></tr>';
                            }
                            if(data.content.count==0){
                                var cons=1;
                            }else{
                                var cons=data.content.count;
                            }

                            $("#paging1").pagination({
                                items: cons,
                                itemsOnPage: 10,
                                cssStyle: 'light-theme',
                                currentPage:data.content.skip
                            });
                            $(".tbIndo tbody").append(string);

                        }else{
                            $(".tbIndo tbody").append("<tr><td colspan='13' style='text-align:center'>无数据</td></tr>");
                        }
                    } else {
                        $(".faceImg").attr("src", "/img/weep.png");
                        $(".oHandle").text(data.result.errorMsg);
                        $(".oSuccess").show(0).delay(1000).hide(0);
                    }
                }
            })
        }
        function sta(id) {
            if(id==0){
               return '订单生成'
            }else if(id==1){
                return '待支付'
            }else if(id==2){
                return '订单超时关闭'
            }else if(id==3){
                return '支付成功'
            }else if(id==4){
                return '订单二维码绑定完成'
            }else if(id==5){
                return '确认收货'
            }else if(id==6){
                return '支付成功'
            }else if(id==7){
                return '已发货'
            }else if(id==-1){
                return '已删除'
            }else if(id==-2){
                return '订单失效'
            }else if(id==-3){
                return '已退款'
            }else if(id==-9){
                return '订单超时'
            }
        }
        function make(id) {
            if(id==0 || id==1 || id==2){
                if(id==0 || id==1){
                    return '<button class="btn btn-success out_line">线下支付</button><button class="btn delete" style="background-color:red;color:white;">删除</button>'
                }else{
                    return '<button class="btn delete" style="background-color:red;color:white;">删除</button>'
                }
            }else if(id==3 || id==4 || id==5 || id==6 || id==7){
                return '<button class="btn refund" style="background:#7266ba;color:white;">退款</button>'
            }else if(id==-1 || id==-2 || id==-9 || id==-3){
                return '不可操作'
            }
        }
        function payType(id) {
            if(id==0){
                return '微信'
            }else if(id==1){
                return '支付宝'
            }else if(id==2){
                return '线下'
            }
        }
        function nulls(id) {
            if(id==null){
                return ''
            }else{
                return id
            }
        }
        function comp(id) {
            for(var h in company){
                if(company[h].form_company_id==id){
                    return company[h].name
                }
            }
        }
        /*日期插件初始化*/
        $("#date1").dateSelect();
        $("#date2").dateSelect();
        $(".td_status").each(function () {
            if ($(this).text().trim() == "已删除") {
                $(this).css("color", "red");
            }
        });
        /*退款*/
        $(document).on("click", ".refund", function () {
            var id = $(this).parent().attr("abc");
            $(".oText").text("确认要退款吗？");
            $(".oMask").show();
            $(".oAnim").show();
            $(".oBtn0").attr("abc", id);
            $(".oBtn0").attr('id', '');
            $(".oBtn0").attr('id', 'oRefund');
        });
        /*点确定*/
        $(document).on('click', '#oRefund', function () {
            $(".oMask").hide();
            $(".oAnim").hide();
            var id = $(this).attr("abc");
            $.ajax({
                headers: {'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
                url: '/order/orderRefund',
                data: {'id': id},
                type: 'post',
                dataType: 'json',
                success: function (data) {
                    if (data.success) {
                        $('.td_' + id).empty();
                        $('.td_' + id).append("不可操作");
                        $('.td_' + id).parent().children(".td_status").text("已退款");
                        $(".faceImg").attr("src", "/img/laugh.png");
                        $(".oHandle").text("退款成功");
                        $(".oSuccess").show(0).delay(1000).hide(0);
                    } else {
                        $(".faceImg").attr("src", "/img/weep.png");
                        $(".oHandle").text(data.msg);
                        $(".oSuccess").show(0).delay(1000).hide(0);
                    }
                }
            })
        });

        /*删除*/
        $(document).on("click", ".delete", function () {
            var id = $(this).parent().attr("abc");
            $(".oText").text("确定要删除吗？");
            $(".oMask").show();
            $(".oAnim").show();
            $(".oBtn0").attr("abc", id);
            $(".oBtn0").attr('id', '');
            $(".oBtn0").attr('id', 'oDelete');
        });

        /*点确定*/
        $(document).on('click', '#oDelete', function () {
            $(".oMask").hide();
            $(".oAnim").hide();
            var id = $(this).attr("abc");
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                },
                url: '/order/delete_order',
                data: {
                    'id': id
                },
                type: 'post',
                dataType: 'json',
                success: function (data) {
                    if (data.success) {
                        $('.tr_' + id).children(".td_status").empty();
                        $('.tr_' + id).children(".td_status").css("color", "red");
                        $('.tr_' + id).children(".td_status").text("已删除");
                        $('.td_' + id).empty();
                        $('.td_' + id).text("不可操作");
                        $(".faceImg").attr("src", "/img/laugh.png");
                        $(".oHandle").text("删除成功");
                        $(".oSuccess").show(0).delay(1000).hide(0);
                    } else {
                        $(".faceImg").attr("src", "/img/weep.png");
                        $(".oHandle").text(data.msg);
                        $(".oSuccess").show(0).delay(1000).hide(0);
                    }
                }
            })
        });

        //线下支付成功
        $(document).on("click", ".out_line", function () {
            var id = $(this).parent().attr("abc");
            $(".oText").text("确认线下已支付？");
            $(".oMask").show();
            $(".oAnim").show();
            $(".oBtn0").attr("abc", id);
            $(".oBtn0").attr('id', '');
            $(".oBtn0").attr('id', 'oPay');
        });

        /*点确定*/
        $(document).on('click', '#oPay', function () {
            $(".oMask").hide();
            $(".oAnim").hide();
            var id = $(this).attr("abc");
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                },
                url: '/company/setOrderStatus',
                data: {
                    'order_id': id
                },
                type: 'post',
                dataType: 'json',
                success: function (data) {
                    if (data.success) {
                        $('.tr_' + id).children(".success_time").text(data.info);
                        $('.tr_' + id).children(".td_status").text("支付成功");
                        $('.tr_' + id).children(".td_type").text("线下");
                        $('.td_' + id).empty();
                        $('.td_' + id).prepend("<button class='btn refund' style='background:#7266ba;color:white;'>退款</button>");
                        $(".faceImg").attr("src", "/img/laugh.png");
                        $(".oHandle").text("线下支付成功");
                        $(".oSuccess").show(0).delay(1000).hide(0);
                    } else {
                        $(".faceImg").attr("src", "/img/weep.png");
                        $(".oHandle").text(data.msg);
                        $(".oSuccess").show(0).delay(1000).hide(0);
                    }
                }
            })
        });

        /*导出*/
        function Export() {
            var girard = $(".girard").val();
            if(girard==''){
                $(".faceImg").attr("src", "/img/weep.png");
                $(".oHandle").text("先输入款号再导出");
                $(".oSuccess").show(0).delay(1000).hide(0);
                return false;
            }
            window.location.href = "/order/export-pre-sale-order?girard="+girard;
        }
    </script>
@endsection